<template>
  <div id="app" class="sticky-header">
    <!-- <HtmlHeader></HtmlHeader> -->
    <!-- <img src="./assets/logo.png"> -->
    <!-- <p><input type="button" class="btn btn-info" value="login button" ></p> -->
    <section>
      <div>        <!-- 侧栏菜单  -->
        <!-- left side start   侧栏菜单  -->
        <div class="left-side sticky-left-side">
          <!--logo and iconic logo start-->
          <div class="logo">
            <a href="index.html">
              <img src="./assets/images/logo.png" alt="">
            </a>
          </div>

          <div class="logo-icon text-center">
            <a href="index.html">
              <img src="./assets/images/logo_icon.png" alt="">
            </a>
          </div>
          <!--logo and iconic logo end-->

          <div class="left-side-inner">
            <!-- visible to small devices only -->
            <div class="visible-xs hidden-sm hidden-md hidden-lg">
              <div class="media logged-user">
                <img alt="" src="./assets/images/photos/user-avatar.png" class="media-object">
                <div class="media-body">
                  <h4>
                    <a href="#">John Doe</a>
                  </h4>
                  <span>"Hello There..."</span>
                </div>
              </div>

              <h5 class="left-nav-title">Account Information</h5>
              <ul class="nav nav-pills nav-stacked custom-nav">
                <li>
                  <a href="#">
                    <i class="fa fa-user"></i>
                    <span>Profile</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-cog"></i>
                    <span>Settings</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-sign-out"></i>
                    <span>Sign Out</span>
                  </a>
                </li>
              </ul>
            </div>

            <!--sidebar nav start-->
            <ul class="nav nav-pills nav-stacked custom-nav">
              <li>
                <a href="index.html">
                  <i class="fa fa-home"></i>
                  <span>Dashboard</span>
                </a>
              </li>
              <li class="menu-list nav-active">
                <a href="">
                  <i class="fa fa-laptop"></i>
                  <span>Layouts</span>
                </a>
                <ul class="sub-menu-list">
                  <li class="active">
                    <a href="blank_page.html"> Blank Page</a>
                  </li>
                  <li>
                    <a href="boxed_view.html"> Boxed Page</a>
                  </li>
                  <li>
                    <a href="leftmenu_collapsed_view.html"> Sidebar Collapsed</a>
                  </li>
                  <li>
                    <a href="horizontal_menu.html"> Horizontal Menu</a>
                  </li>

                </ul>
              </li>
              <li class="menu-list">
                <a href="">
                  <i class="fa fa-book"></i>
                  <span>UI Elements</span>
                </a>
                <ul class="sub-menu-list">
                  <li>
                    <a href="general.html"> General</a>
                  </li>
                  <li>
                    <a href="buttons.html"> Buttons</a>
                  </li>
                  <li>
                    <a href="tabs-accordions.html"> Tabs & Accordions</a>
                  </li>
                  <li>
                    <a href="typography.html"> Typography</a>
                  </li>
                  <li>
                    <a href="slider.html"> Slider</a>
                  </li>
                  <li>
                    <a href="panels.html"> Panels</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="login.html">
                  <i class="fa fa-sign-in"></i>
                  <span>Login Page</span>
                </a>
              </li>
            </ul>
            <!--sidebar nav end-->
          </div>
        </div>
        <!-- left side end-->
      </div>

      <!-- main content start-->
      <div class="main-content">

        <!-- header section start    顶部菜单  -->
        <div class="header-section">

          <!--toggle button start-->
          <a class="toggle-btn" @click="toggleBtnClick">
            <i class="fa fa-bars"></i>
          </a>
          <!--toggle button end-->

          <!--search start-->
          <form class="searchform" action="index.html" method="post">
            <input type="text" class="form-control" name="keyword" placeholder="Search here..." />
          </form>
          <!--search end-->

          <!--notification menu start -->
          <div class="menu-right">
            <ul class="notification-menu">
              <li>
                <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                  <i class="fa fa-bell-o"></i>
                  <span class="badge">4</span>
                </a>
                <div class="dropdown-menu dropdown-menu-head pull-right">
                  <h5 class="title">Notifications</h5>
                  <ul class="dropdown-list normal-list">
                    <li class="new">
                      <a href="">
                        <span class="label label-danger">
                          <i class="fa fa-bolt"></i>
                        </span>
                        <span class="name">Server #1 overloaded. </span>
                        <em class="small">34 mins</em>
                      </a>
                    </li>
                    <li class="new">
                      <a href="">
                        <span class="label label-danger">
                          <i class="fa fa-bolt"></i>
                        </span>
                        <span class="name">Server #3 overloaded. </span>
                        <em class="small">1 hrs</em>
                      </a>
                    </li>
                    <li class="new">
                      <a href="">See All Notifications</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  <img src="./assets/images/photos/user-avatar.png" alt="" /> John Doe
                  <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                  <li>
                    <a href="#">
                      <i class="fa fa-user"></i> Profile</a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-cog"></i> Settings</a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-sign-out"></i> Log Out</a>
                  </li>
                </ul>
              </li>

            </ul>
          </div>
          <!--notification menu end -->
        </div>
        <!-- header section end-->

        <div><!-- 主要业务显示页  可拆分为viewrouter-->
          <!-- page heading start-->
          <div class="page-heading">
            Page Tittle goes here
          </div>
          <!-- page heading end-->

          <!--body wrapper start-->
          <div class="wrapper">
            Body contents goes here
          </div>
          <!--body wrapper end-->
        </div>

        <!-- <router-view></router-view> -->
        <!--footer section start-->
        <!-- <html-footer></html-footer> -->
        <div>    <!--  页脚  -->
          <footer class="sticky-footer">
            2017 &copy; AdminEx by
            <a href="#" target="_blank">蔡承锋</a>
          </footer>
        </div>
        <!-- footer section end -->
      </div>
      <!-- main content end-->
    </section>
  </div>
</template>

<script>
  //js
  // import jquery from './assets/js/jquery-1.10.2.min.js'
  import $ from "jquery";
  // import './assets/js/jquery-ui-1.9.2.custom.min.js'
  // import './assets/js/jquery-migrate-1.2.1.min.js'
  import nicescroll from "./assets/js/jquery.nicescroll.js";
  // import nicescroll from "jquery.nicescroll";
  import bootstrap from "./assets/js/bootstrap.js";
  // import './assets/js/modernizr.min.js'
  import myscripts from "./assets/js/scripts.js";

  //csss
  import "./assets/css/bootstrap.css";
  // import './assets/css/bootstrap-theme.css'
  import "./assets/css/bootstrap-reset.css";
  import "./assets/css/style-responsive.css";
  import "./assets/css/jquery-ui-1.10.3.css";
  import "./assets/fonts/font-awesome.min.css";

  //项目
  import Index from "src/components/Index";
  // import HtmlFooter from "src/components/Footer";
  // import HtmlHeader from "src/components/Header";
  // import LeftSide from "src/components/LeftSide";
  // import MainContent from "src/components/MainContent";
  import HtmlFooter from "src/components/Footer";

  export default {
    name: "app",
    components: {
      // HtmlHeader,
      Index,
      HtmlFooter
      // LeftSide
      // MainContent
    },
    mounted: function () {
      // custom scrollbar  自定义滚动条样式设置
      $("html").niceScroll({
        styler: "fb",
        cursorcolor: "#65cea7",
        cursorwidth: "6",
        cursorborderradius: "0px",
        background: "#424f63",
        spacebarenabled: false,
        cursorborder: "0",
        zindex: "1000"
      });
      $(".left-side").niceScroll({
        styler: "fb",
        cursorcolor: "#65cea7",
        cursorwidth: "3",
        cursorborderradius: "0px",
        background: "#424f63",
        spacebarenabled: false,
        cursorborder: "0"
      });
      $(".left-side").getNiceScroll();
      if ($("#app").hasClass("left-side-collapsed")) {
        $(".left-side").getNiceScroll().hide();
      }

      // Toggle Left Menu
      $(".menu-list > a").click(function () {
        var parent = $(this).parent();
        var sub = parent.find("> ul");
        if (!$("#app").hasClass("left-side-collapsed")) {
          if (sub.is(":visible")) {
            sub.slideUp(200, function () {
              parent.removeClass("nav-active");
              $(".main-content").css({
                height: ""
              });
              mainContentHeightAdjust();
            });
          } else {
            visibleSubMenuClose();
            parent.addClass("nav-active");
            sub.slideDown(200, function () {
              mainContentHeightAdjust();
            });
          }
        }
        return false;
      });

      function visibleSubMenuClose() {
        $(".menu-list").each(function () {
          var t = $(this);
          if (t.hasClass("nav-active")) {
            t.find("> ul").slideUp(200, function () {
              t.removeClass("nav-active");
            });
          }
        });
      }

      function mainContentHeightAdjust() {
        // Adjust main content height
        var docHeight = $(document).height();
        if (docHeight > $(".main-content").height())
          $(".main-content").height(docHeight);
      }

      //  class add mouse hover
      $(".custom-nav > li").hover(
        function () {
          $(this).addClass("nav-hover");
        },
        function () {
          $(this).removeClass("nav-hover");
        }
      );

      // Menu Toggle
      $(".toggle-btn").click(function () {
        $(".left-side")
          .getNiceScroll()
          .hide();

        if ($("#app").hasClass("left-side-collapsed")) {
          $(".left-side")
            .getNiceScroll()
            .hide();
        }
        var body = $("body");
        var bodyposition = body.css("position");

        if (bodyposition != "relative") {
          if (!body.hasClass("left-side-collapsed")) {
            body.addClass("left-side-collapsed");
            $(".custom-nav ul").attr("style", "");

            $(this).addClass("menu-collapsed");
          } else {
            body.removeClass("left-side-collapsed chat-view");
            $(".custom-nav li.active ul").css({
              display: "block"
            });

            $(this).removeClass("menu-collapsed");
          }
        } else {
          if (body.hasClass("left-side-show")) body.removeClass("left-side-show");
          else body.addClass("left-side-show");

          mainContentHeightAdjust();
        }
      });
    },
    methods: {
      toggleBtnClick: function () {
        // Menu Toggle  侧栏菜单收起
        console.log("侧栏菜单收起按钮点击！");
        $(".left-side")
          .getNiceScroll()
          .hide();
        // alert("1");
        if ($("#app").hasClass("left-side-collapsed")) {
          $(".left-side")
            .getNiceScroll()
            .hide();
        }
        // alert("2");
        var body = $("#app");
        var bodyposition = body.css("position");
        if (bodyposition != "relative") {
          if (!body.hasClass("left-side-collapsed")) {
            body.addClass("left-side-collapsed");
            $(".custom-nav ul").attr("style", "");
            $(this).addClass("menu-collapsed");
          } else {
            body.removeClass("left-side-collapsed chat-view");
            $(".custom-nav li.active ul").css({
              display: "block"
            });
            $(this).removeClass("menu-collapsed");
          }
        } else {
          if (body.hasClass("left-side-show")) body.removeClass("left-side-show");
          else body.addClass("left-side-show");
          mainContentHeightAdjust();
        }
      }
    }
  };

</script>

<style>
  /* #app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
  /*--------------------------------
      FOOTER CONTENT STYLES
---------------------------------*/

  footer {
    background: #fff;
    padding: 15px;
    color: #7a7676;
    font-size: 12px;
    position: static;
    bottom: 0;
    width: auto;
    border-top: 1px solid #eff0f4;
  }

  footer.sticky-footer {
    text-align: left;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
  }

  .container footer {
    width: 79.5%;
    position: absolute;
    bottom: 0;
  }
  /*---------------------------------
            LEFT SIDE
----------------------------------*/

  .left-side {
    text-align: left;
    width: 240px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .sticky-left-side {
    position: fixed;
    height: 100%;
    overflow-y: auto;
    z-index: 100;
  }

  .sticky-left-side .custom-nav {
    margin-top: 50px;
  }

  .left-side-collapsed .sticky-left-side {
    overflow-y: visible;
  }

  .logo {
    padding-top: 5px;
    height: 51px;
  }

  .logo a {
    font-size: 28px;
    color: #fff;
    margin: 0 0 0 20px;
    text-decoration: none;
    display: inline-block;
  }

  .logo-icon {
    display: none;
  }

  .left-side-collapsed .logo-icon {
    height: 45px;
    margin-top: -48px;
    display: block !important;
  }

  .left-side-inner {
    text-align: left;
    padding: 0px;
    margin-bottom: 50px;
  }

  .left-side .searchform {
    display: none;
  }

  .left-side .searchform::after {
    content: "";
    display: block;
    clear: both;
  }

  .left-side .searchform input {
    padding: 10px;
    width: 90%;
    margin: 0 0 20px 12px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: none;
  }

  .left-side .logged-user {
    padding: 0 0 15px 12px;
    margin: 0 0 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
  }

  .left-side .logged-user .media-object {
    width: 45px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    float: left;
  }

  .left-side .logged-user .media-body {
    margin-left: 60px;
    color: #d7d7d7;
  }

  .left-side .logged-user .media-body h4 {
    font-size: 15px;
    margin: 5px 0 0 0;
  }

  .left-side .logged-user .media-body h4 a {
    color: #fff;
  }

  .left-side .logged-user .media-body span {
    font-style: italic;
    font-size: 11px;
    opacity: 0.5;
  }

  .custom-nav {
    margin-bottom: 10px;
  }

  .custom-nav>li>a {
    color: #fff;
    padding: 12px 20px;
    border-radius: 0;
    -webkit-border-radius: 0;
  }

  .custom-nav>li>a:hover,
  .custom-nav>li>a:active {
    background-color: #353f4f;
    color: #65cea7;
    border-radius: 0;
    -webkit-border-radius: 0;
  }

  .custom-nav>li.menu-list>a {
    background: transparent url(./assets/images/plus-white.png) no-repeat 93% center;
  }

  .custom-nav>li.menu-list>a:hover {
    background-color: #353f4f;
    background-image: url(./assets/images/plus.png);
  }

  .custom-nav>li.nav-active>a {
    background-color: #353f4f;
    background-image: url(./assets/images/minus.png);
    color: #65cea7;
  }

  .custom-nav>li.nav-active>ul {
    display: block;
  }

  .custom-nav>li.nav-active>a:hover {
    background-image: url(./assets/images/minus.png);
  }

  .custom-nav>li.active>a,
  .custom-nav>li.active>a:hover,
  .custom-nav>li.active>a:focus {
    background-color: #353f4f;
    color: #65cea7;
  }

  .custom-nav>li.menu-list.active>a {
    background-image: url(./assets/images/plus.png);
  }

  .custom-nav>li.nav-active.active>a {
    background-image: url(./assets/images/minus.png);
  }

  .custom-nav>li.nav-active.active>a:hover {
    background-image: url(./assets/images/minus.png);
  }

  .custom-nav li .fa {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 10px;
    width: 16px;
    text-align: center;
  }

  .custom-nav .sub-menu-list {
    list-style: none;
    display: none;
    margin: 0;
    padding: 0;
    background: #353f4f;
  }

  .custom-nav .sub-menu-list>li>a {
    color: #fff;
    font-size: 13px;
    display: block;
    padding: 10px 5px 10px 50px;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
  }

  .custom-nav .sub-menu-list>li>a:hover,
  .custom-nav .sub-menu-list>li>a:active,
  .custom-nav .sub-menu-list>li>a:focus {
    text-decoration: none;
    color: #65cea7;
    background: #2a323f;
  }

  .custom-nav .sub-menu-list>li .fa {
    font-size: 12px;
    opacity: 0.5;
    margin-right: 5px;
    text-align: left;
    width: auto;
    vertical-align: baseline;
  }

  .custom-nav .sub-menu-list>li.active>a {
    color: #65cea7;
    background-color: #2a323f;
  }

  .custom-nav .sub-menu-list ul {
    margin-left: 12px;
    border: 0;
  }

  .custom-nav .menu-list.active ul {
    display: block;
  }
  /*------------------------------------------
            LEFT SIDE COLLAPSE
-------------------------------------------*/

  .left-side-collapsed .logo {
    display: none;
  }

  .left-side-collapsed .header-section {
    margin-left: 0px;
  }

  .left-side-collapsed .left-side {
    width: 52px;
    top: 52px;
  }

  .left-side-collapsed .left-side-inner {
    padding: 0;
  }

  h5.left-nav-title {
    margin-left: 10px;
    color: #fff;
  }

  .left-side-collapsed .custom-nav {
    margin: 2px 0 20px 0;
  }

  .left-side-collapsed .custom-nav li a {
    text-align: center;
    padding: 10px;
    position: relative;
  }

  .left-side-collapsed .custom-nav>li.menu-list>a {
    background-image: none;
  }

  .left-side-collapsed .custom-nav li a span {
    position: absolute;
    background: #65cea7;
    padding: 10px;
    left: 52px;
    top: 0;
    min-width: 173px;
    text-align: left;
    z-index: 100;
    display: none;
  }

  .left-side-collapsed .custom-nav li a span:after {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #65cea7;
    border-width: 6px;
    margin-top: -6px;
  }

  .left-side-collapsed .custom-nav li.active a span {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }

  .left-side-collapsed .custom-nav ul,
  .left-side-collapsed .custom-nav .menu-list.nav-active ul {
    display: none;
  }

  .left-side-collapsed .custom-nav .menu-list.nav-hover ul {
    display: block;
  }

  .left-side-collapsed .custom-nav>li.nav-hover>a,
  .left-side-collapsed .custom-nav>li.nav-hover.active>a {
    background: #fff;
    color: #424f63;
  }

  .left-side-collapsed .custom-nav li.nav-hover a span {
    display: block;
    color: #fff;
  }

  .left-side-collapsed .custom-nav li.nav-hover.active a span {
    background: #65cea7;
    color: #fff;
  }

  .left-side-collapsed .custom-nav li.nav-hover ul {
    display: block;
    position: absolute;
    top: 40px;
    left: 53px;
    margin: 0;
    min-width: 172px;
    background: #353f4f;
    z-index: 100;
    -moz-border-radius: 0 0 2px 0;
    -webkit-border-radius: 0 0 2px 0;
    border-radius: 0 0 2px 0;
  }

  .left-side-collapsed .custom-nav ul a {
    text-align: left;
    padding: 6px 10px;
    padding-left: 10px;
  }

  .left-side-collapsed .custom-nav ul a:hover {
    background: #2a323f;
  }

  .left-side-collapsed .custom-nav li a i {
    margin-right: 0;
  }

  .left-side-collapsed .main-content {
    margin-left: 52px;
  }

  .left-side-collapsed .left-side {
    overflow: visible !important;
  }
  /* ---------------------------------------------
                   common body        
---------------------------------------------- */

  body {
    background: #424f63;
    font-family: "Open Sans", sans-serif;
    color: #7a7676;
    line-height: 20px;
    overflow-x: hidden;
    font-size: 14px;
  }

  input,
  select,
  textarea {
    font-family: "Open Sans", sans-serif;
    color: #767676;
  }

  a {
    color: #65cea7;
  }

  a:focus,
  a:active,
  a:hover {
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    color: #353f4f;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: "Open Sans", sans-serif;
  }

  .mtop10 {
    margin-top: 10px;
  }

  hr {
    border-color: #ddd;
  }
  /*-----------------------------
        MAIN CONTENT
------------------------------*/

  .main-content {
    /* position: absolute;
    top:0; */
    margin-left: 240px;
    background: #eff0f4;
    min-height: 1000px;
  }

  .page-heading {
    padding: 15px;
    position: relative;
  }

  .page-heading h3 {
    color: #49586e;
    font-size: 25px;
    font-weight: normal;
    margin: 10px 0;
  }

  .page-heading .breadcrumb {
    padding: 0;
    margin: 0;
    background: none;
  }

  .page-heading .breadcrumb a {
    color: #999999;
  }

  .page-heading .breadcrumb li.active {
    color: #65cea7;
  }

  .wrapper {
    padding: 15px;
  }

  .wrapper::after {
    clear: both;
    display: block;
    content: "";
    margin-bottom: 30px;
  }
  /*----------------------------
        HEADER SECTION
-----------------------------*/

  .header-section {
    background: #fff;
    border-bottom: 1px solid #eff0f4;
  }

  .header-section::after {
    clear: both;
    display: block;
    content: "";
  }

  .toggle-btn {
    width: 52px;
    height: 50px;
    font-size: 20px;
    padding: 15px;
    cursor: pointer;
    float: left;
    color: #212121;
    border-right: 1px solid #e7e7e7;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
  }

  .toggle-btn:hover {
    background: #65cea7;
    color: #fff;
    border-right-color: #65cea7;
  }

  .searchform input {
    box-shadow: none;
    float: left;
    font-size: 14px;
    height: 35px;
    margin: 7px 0 0 10px;
    padding: 10px;
    width: 220px;
  }

  .searchform input:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #ddd;
  }

  .menu-right {
    float: right;
    margin-right: 15px;
  }

  .notification-menu {
    list-style: none;
  }

  .notification-menu>li {
    display: inline-block;
    float: left;
    position: relative;
  }

  .notification-menu>li>a>i {
    margin-top: 6px;
  }

  .notification-menu .dropdown-toggle {
    padding: 12px 10px;
    border-color: #fff;
    background: #fff;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: none;
  }

  .notification-menu .dropdown-toggle:hover,
  .notification-menu .dropdown-toggle:focus,
  .notification-menu .dropdown-toggle:active,
  .notification-menu .dropdown-toggle.active,
  .notification-menu .open .dropdown-toggle.dropdown-toggle {
    background: #424f63;
    color: #65cea7;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .notification-menu .dropdown-toggle img {
    vertical-align: middle;
    margin-right: 5px;
    width: 26px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }

  .notification-menu .dropdown-toggle .caret {
    margin-left: 5px;
  }

  .notification-menu .dropdown-menu {
    border: 0;
    margin-top: 0px;
    -moz-border-radius: 2px 0 2px 2px;
    -webkit-border-radius: 2px 0 2px 2px;
    border-radius: 2px 0 2px 2px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 5px;
  }

  .notification-menu .dropdown-menu:after {
    border-bottom: 6px solid #65cea7;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    right: 10px;
    position: absolute;
    top: -6px;
  }

  .notification-menu .dropdown-menu li {
    display: block;
    margin: 0;
    float: none;
    background: none;
    padding: 15px;
  }

  .notification-menu .dropdown-menu-usermenu li {
    padding: 0;
  }

  .notification-menu .dropdown-menu li a {
    color: #fff;
    font-size: 13px;
    padding: 7px 10px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
  }

  .notification-menu .dropdown-menu li a:hover {
    background: #2a323f;
    color: #fff;
  }

  .notification-menu .dropdown-menu li i {
    font-size: 11px;
    margin-right: 5px;
  }

  .notification-menu .dropdown-menu-head {
    padding: 0;
    min-width: 300px;
  }

  .notification-menu .info-number {
    padding: 12px 15px;
    height: 50px;
    font-size: 16px;
    background: #fff;
    color: #333;
    border-color: #fff;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
  }

  .notification-menu .dropdown-menu-usermenu {
    background: #65cea7;
    min-width: 200px;
  }

  .notification-menu .dropdown-menu-head ul {
    border: 1px solid #ddd;
    border-top: 0;
    padding: 0;
  }

  .notification-menu .dropdown-menu-head li a {
    color: #333;
    padding: 0;
    opacity: 1;
  }

  .notification-menu .dropdown-menu-head li a:hover {
    background: none;
    color: #65cea7 !important;
    text-decoration: none;
  }

  .notification-menu .btn-group {
    margin-bottom: 0;
  }

  .dropdown-list li {
    padding: 15px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
  }

  .dropdown-list li:last-child {
    border-bottom: 0;
  }

  .dropdown-list .thumb {
    width: 36px;
    float: left;
  }

  .dropdown-list .thumb img {
    width: 100%;
    display: block;
    vertical-align: middle;
  }

  .dropdown-list .desc {
    margin-left: 45px;
    display: block;
  }

  .dropdown-list .desc h5 {
    font-size: 13px;
    margin-top: 7px;
  }

  .dropdown-list li:last-child {
    padding: 10px 15px;
  }

  .dropdown-list li .badge {
    float: right;
  }

  .user-list {
    width: 300px;
  }

  .user-list .progress {
    margin-bottom: 0;
  }

  .normal-list li a .label i {
    margin-right: 0;
  }

  .normal-list li a span.label {
    float: left;
    margin-right: 10px;
    padding: 5px;
    width: 20px;
  }

  .normal-list li a:hover {
    color: #65cea7 !important;
    text-decoration: none;
  }

  .normal-list li .name {
    font-size: 13px;
    font-family: "Arial" Helvetica, sans-serif;
    line-height: 21px;
  }

  .normal-list li .msg {
    font-size: 12px;
    line-height: normal;
    color: #999;
    display: block;
  }

  .info-number .badge {
    background: #ff6c60;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    font-size: 10px;
    font-weight: normal;
    line-height: 13px;
    padding: 2px 5px;
    position: absolute;
    right: 4px;
    top: 10px;
  }
  /* ------------------------------
        STICKY HEADER  标题栏根据侧栏菜单收起
---------------------------------*/

  .sticky-header .logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    z-index: 100;
    background: #424f63;
  }

  .sticky-header .left-side {
    /*top: 50px;*/
  }

  .sticky-header .header-section {
    position: fixed;
    top: 0;
    left: 240px;
    width: 100%;
    z-index: 100;
  }

  .sticky-header .main-content {
    padding-top: 50px;
  }

  .sticky-header .menu-right {
    margin-right: 255px;
  }

  .sticky-header.left-side-collapsed .header-section {
    left: 52px;
  }

  .sticky-header.left-side-collapsed .menu-right {
    margin-right: 67px;
  }
  /* -----------------------
        DROPDOWN
--------------------------*/

  .dropdown-menu-head {
    background: #fff;
  }

  .dropdown-menu-head .title {
    background: #65cea7;
    color: #fff;
    padding: 15px;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
  }

</style>
